<template>
  <div class="swiper">
    <swiper :options="swiperOptions" v-if="showSwiper">
      <swiper-slide v-for="item of list" :key="item.id">
        <img :src="item.imgUrl" class="swiper-img" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: 'HomeSwiper',
  props: {
    list: Array
  },
  data() {
    return {
      swiperOptions: {
        loop: true,
        autoplay: 2000,
        pagination: '.swiper-pagination'
      }
    }
  },
  computed: {
    showSwiper() {
      return this.list.length
    }
  }
}
</script>
<style lang='stylus' scoped>
// 解决设置样式不生效，>>>设置样式不受scoped约束
.swiper >>> .swiper-pagination-bullet-active {
  background: #fff;
}

.swiper {
  background: #ccc;
  margin-bottom: 0.1rem;
  // 图片未加载时占位空间，防止图片加载出来页面抖动
  // 方法一:
  // overflow hidden;
  // width:100%;
  // height:0; //如设置高度百分百是相对于父级元素的高度,所以不能设置高度百分百
  // 图片高度除于宽度百分百相对于,当前元素宽度的百分百
  // padding-bottom:31.25%;
  // 方法二:
  // width:100%;
  // height:31.25vw; //浏览器兼容上可能有问题
}

.swiper-img {
  width: 100%;
}
</style>
